<template>
    <div class="content">
        <Form :label-width="140" :model="form" ref="form" :rules="rules">
            <FormItem label="学校ID" prop="schoolId">
                <Input
                    :value="form.schoolId"
                    placeholder="系统自动生成"
                    disabled
                ></Input>
            </FormItem>
            <FormItem label="学校名称" prop="schoolName">
                <Input
                    v-model="form.schoolName"
                    :maxlength="20"
                    placeholder="请输入学校全称"
                ></Input>
            </FormItem>
            <FormItem label="联系人" prop="contacts">
                <Input
                    v-model="form.contacts"
                    placeholder="请输入联系人姓名"
                ></Input>
            </FormItem>
            <FormItem label="联系方式" prop="tel">
                <Input
                    v-model="form.tel"
                    placeholder="请输入学校联系方式"
                ></Input>
            </FormItem>
            <FormItem label="地址" prop="addr">
                <Input v-model="form.addr" placeholder="请输入学校地址"></Input>
            </FormItem>
            <FormItem label="状态" prop="status">
                <Select
                    style="width: 100%;"
                    placeholder="状态"
                    v-model="form.status"
                    clearable
                >
                    <Option :value="1">可用</Option>
                    <Option :value="0">禁用</Option>
                </Select>
            </FormItem>
            <FormItem label="备注" prop="remark">
                <Input v-model="form.remark" type="textarea"></Input>
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { addSchool, updateSchool, querySchoolInfo } from '@/api/schoolManage'

export default {
    inject: ['nextPageReload'],
    data () {
        const validateStatus = (rule, value, callback) => {
            if (typeof value !== 'number') {
                callback(new Error('状态必选'))
            } else {
                callback()
            }
        }
        return {
            form: {
                status: 1,
                addr: '',
                contacts: '',
                remark: '',
                schoolId: '',
                schoolName: '',
                tel: ''
            },
            rules: {
                schoolName: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '学校名称必填'
                    },
                    {
                        min: 2,
                        max: 20,
                        trigger: 'blur',
                        message: '学校名称2-20位'
                    }
                ],
                status: [
                    {
                        required: true,
                        validator: validateStatus,
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    mounted () {
        const id = this.$route.params.id
        if (id) {
            this.queryInfo(id)
        }
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    if (this.form.schoolId && !this.form.status) {
                        this.$Modal.confirm({
                            title: '提示',
                            content: '禁用学校后将同步禁用该院校所有账号，确认是否禁用？',
                            onOk: this.handleSaveData
                        })
                    } else {
                        this.handleSaveData()
                    }
                }
            })
        },
        handleSaveData () {
            const enable = this.form.status === 1
            const fn = this.form.schoolId ? updateSchool : addSchool
            fn({
                ...this.form,
                enable
            }).then(res => {
                if (res.data.code === '0000') {
                    this.$Message.success(`保存成功`)
                    this.nextPageReload()
                    this.handleCancel()
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'schoolManageList'
            })
        },
        setFormBySchoolInfo (data) {
            if (!data) return
            Object.keys(this.form).forEach(k => {
                if (data.hasOwnProperty(k)) {
                    this.form[k] = data[k]
                }
            })
            if (typeof data.enable === 'boolean') {
                this.form.status = data.enable ? 1 : 0
            } else {
                this.form.status = ''
            }
        },
        queryInfo (id) {
            querySchoolInfo(id).then(res => {
                if (res.data.code === '0000') {
                    this.setFormBySchoolInfo(res.data.data)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
